<template>
  <div class="app-container">
    <div class="filter-container">
      <!--<el-input v-if="formThead.id" v-model="listQuery.id" style="width: 200px;" class="filter-item" placeholder="id" clearable @keyup.enter.native="handleFilter"/>-->
      <el-input v-if="formThead.orderNo" v-model="listQuery.orderNo" style="width: 200px;" class="filter-item" placeholder="订单编号" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.userNo" v-model="listQuery.userNo" style="width: 200px;" class="filter-item" placeholder="用户编号" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.title" v-model="listQuery.title" style="width: 200px;" class="filter-item" placeholder="订单标题" clearable @keyup.enter.native="handleFilter"/>
      <!--<div v-if="formThead.create_time" class="filter-item">-->
      <!--<el-date-picker v-model="listQuery.create_time" type="datetime" placeholder="创建时间" clearable @keyup.enter.native="handleFilter"/>-->
      <!--</div>-->
      <div class="filter-item">
        <el-date-picker
          v-model="listQuery.create_time"
          type="daterange"
          range-separator="-"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"/>
      </div>
      <div class="filter-item">
        <el-select v-model="listQuery.user_id" placeholder="选择用户" filterable clearable @keyup.enter.native="handleFilter">
          <el-option v-for="op in user_all" :key="op.account_id" :label="op.username" :value="op.account_id"/>
        </el-select>
      </div>
      <!--<div v-if="formThead.status" class="filter-item">-->
      <!--<el-select v-model="listQuery.status" placeholder="状态" clearable @keyup.enter.native="handleFilter">-->
      <!--<el-option v-for="op in select_status" :key="op.value" :label="op.label" :value="op.value"/>-->
      <!--</el-select>-->
      <!--</div>-->
      <el-input v-if="formThead.sum" v-model="listQuery.sum" style="width: 200px;" class="filter-item" placeholder="数量" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.total_price" v-model="listQuery.total_price" style="width: 200px;" class="filter-item" placeholder="订单总价" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.user_id" v-model="listQuery.user_id" style="width: 200px;" class="filter-item" placeholder="供应商id" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.address_id" v-model="listQuery.address_id" style="width: 200px;" class="filter-item" placeholder="地址id" clearable @keyup.enter.native="handleFilter"/>
      <!--<div v-if="formThead.delivery_time" class="filter-item">-->
      <!--<el-date-picker v-model="listQuery.delivery_time" type="datetime" placeholder="交货日期" clearable @keyup.enter.native="handleFilter"/>-->
      <!--</div>-->
      <el-input v-if="formThead.trading_hours" v-model="listQuery.trading_hours" style="width: 200px;" class="filter-item" placeholder="交易时长" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.distribution_type" v-model="listQuery.distribution_type" style="width: 200px;" class="filter-item" placeholder="配送方式" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.supplier_address" v-model="listQuery.supplier_address" style="width: 200px;" class="filter-item" placeholder="供应商地址" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.supplier_phone" v-model="listQuery.supplier_phone" style="width: 200px;" class="filter-item" placeholder="供应商电话" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.supplier_name" v-model="listQuery.supplier_name" style="width: 200px;" class="filter-item" placeholder="供应商名字" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.supplier_email" v-model="listQuery.supplier_email" style="width: 200px;" class="filter-item" placeholder="供应商邮箱" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.receiving_name" v-model="listQuery.receiving_name" style="width: 200px;" class="filter-item" placeholder="收货人名字" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.receiving_address" v-model="listQuery.receiving_address" style="width: 200px;" class="filter-item" placeholder="收货人地址" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.receiving_phone" v-model="listQuery.receiving_phone" style="width: 200px;" class="filter-item" placeholder="收货人电话" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.receiving_email" v-model="listQuery.receiving_email" style="width: 200px;" class="filter-item" placeholder="收货人邮箱" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.principal" v-model="listQuery.principal" style="width: 200px;" class="filter-item" placeholder="发货负责人" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.phone" v-model="listQuery.phone" style="width: 200px;" class="filter-item" placeholder="负责人电话" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-if="formThead.code" v-model="listQuery.code" style="width: 200px;" class="filter-item" placeholder="车牌快递编码" clearable @keyup.enter.native="handleFilter"/>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" style="margin-right: 0px" icon="el-icon-download" type="primary" @click="DownloadExcel">获取Excel</el-button>
      <addPage @getLists="getLists"/>
    </div>

    <!--<div class="filter-container">-->
    <!--<el-checkbox v-model="formThead.id" label="id">id</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.orderNo" label="订单编号">订单编号</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.title" label="订单标题">订单标题</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.create_time" label="创建时间">创建时间</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.status" label="状态">状态</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.sum" label="数量">数量</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.total_price" label="订单总价">订单总价</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.user_id" label="供应商id">供应商id</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.address_id" label="地址id">地址id</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.seal" label="公章">公章</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.delivery_time" label="交货日期">交货日期</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.trading_hours" label="交易时长">交易时长</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.distribution_type" label="配送方式">配送方式</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.supplier_address" label="供应商地址">供应商地址</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.supplier_phone" label="供应商电话">供应商电话</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.supplier_name" label="供应商名字">供应商名字</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.supplier_email" label="供应商邮箱">供应商邮箱</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.receiving_name" label="收货人名字">收货人名字</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.receiving_address" label="收货人地址">收货人地址</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.receiving_phone" label="收货人电话">收货人电话</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.receiving_email" label="收货人邮箱">收货人邮箱</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.principal" label="发货负责人">发货负责人</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.phone" label="负责人电话">负责人电话</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.code" label="车牌快递编码">车牌快递编码</el-checkbox>-->
    <!--<el-checkbox v-model="formThead.picture" label="车牌快递照片">车牌快递照片</el-checkbox>-->
    <!--</div>-->
    <el-tabs v-model="listQuery.status" @tab-click="getLists">
      <el-tab-pane label="全部" name="all"/>
      <el-tab-pane label="待确认" name="await_decided"/>
      <el-tab-pane label="已确认" name="decided"/>
      <el-tab-pane label="已拒绝" name="canceled"/>
      <el-tab-pane label="已发货" name="shipped"/>
      <el-tab-pane label="已收货" name="received"/>
    </el-tabs>
    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column v-if="formThead.id" label="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.orderNo" label="订单编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.orderNo }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.userNo" label="用户编号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.userNo }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.title" label="商品名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.foll }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="listQuery.status === 'received' || listQuery.status === 'shipped' " label="退货地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.supplier_address }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.payment_time" label="货款账期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.payment_time }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.create_time" label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.status" label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === ''">—</span>
          <span v-if="scope.row.status === 'await_decided'">待确认</span>
          <span v-if="scope.row.status === 'decided'">已确认</span>
          <span v-if="scope.row.status === 'await_shipped'">待发货</span>
          <span v-if="scope.row.status === 'shipped'">已发货</span>
          <span v-if="scope.row.status === 'received'">已收货</span>
          <span v-if="scope.row.status === 'canceled'">已取消</span>
          <span v-if="scope.row.status === 'refuse'">已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.sum" label="数量" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sum }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.total_price" label="订单总价" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.total_price }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.user_id" label="供应商id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.address_id" label="地址id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address_id }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.seal" label="公章" align="center">
        <template slot-scope="scope">
          <span><img :src="scope.row.seal" alt="" height="120" @click="bigImage(scope.row.seal)"></span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.delivery_time" label="交货日期" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.delivery_time | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.trading_hours" label="交易时长" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.trading_hours }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.distribution_type" label="配送方式" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.distribution_type }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.supplier_phone" label="供应商电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.supplier_phone }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.supplier_name" label="供应商名字" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.supplier_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.supplier_email" label="供应商邮箱" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.supplier_email }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.receiving_name" label="收货人名字" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.receiving_name }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.receiving_address" label="收货人地址" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.receiving_address }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.receiving_phone" label="收货人电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.receiving_phone }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.receiving_email" label="收货人邮箱" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.receiving_email }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.principal" label="发货负责人" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.principal }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.phone" label="负责人电话" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.code" label="车牌快递编码" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="formThead.picture" label="车牌快递照片" align="center">
        <template slot-scope="scope">
          <span><img :src="scope.row.picture" alt="" height="120" @click="bigImage(scope.row.picture)"></span>
        </template>
      </el-table-column>
      <el-table-column label="商品列表" align="center">
        <template slot-scope="scope">
          <item_show :row_data="scope.row" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--编辑-->
          <!--<editPage :row_data="scope.row" @getLists="getLists"/>-->
          <order_show v-if="scope.row.status === 'await_decided' || scope.row.status ==='decided'" :row_data="scope.row" />
          <order_shipped_show v-if="scope.row.status === 'await_shipped' || scope.row.status ==='shipped' || scope.row.status === 'received'" :row_data="scope.row" />
          <order_canceled_show v-if="scope.row.status === 'canceled' || scope.row.status === 'refuse'" :row_data="scope.row" />
          <el-button v-if="scope.row.status === 'shipped'" @click="order_received_button(scope.row.id)">确认收货</el-button>
          <!--删除-->
          <!--<el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"/>-->
        </template>
      </el-table-column>
    </el-table>
    <!--大图弹窗-->
    <transition name="el-zoom-in-top">
      <div v-show="bigImageSrc !== null" class="bigImg" @click="bigImage()">
        <img :src="bigImageSrc" style="width:auto; height:400px; border-radius:0px;">
      </div>
    </transition>
    <!--页码-->
    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { getList, del, order_received, getExcel } from '@/api/order/order'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
import addPage from './addPage'
import editPage from './editPage'
import order_show from './order_show'
import order_shipped_show from './order_shipped_show'
import order_canceled_show from './order_canceled_show'
import item_show from './item_show'
import { parseTime } from '@/utils/index'
import { get_user } from '@/api/submission/submission_confirmation'

export default {
  name: 'ComplexTable',
  directives: {
    waves
  },
  components: { addPage, editPage, order_show, item_show, order_shipped_show, order_canceled_show },
  filters: {
    formatDate: function(time) {
      if (!time) {
        return ''
      }
      return parseTime(time)
    }
  },

  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      select_status: [],
      bigImageSrc: null,
      downloadLoading: false,
      user_all: [],
      listQuery: {
        id: undefined,
        orderNo: undefined,
        userNo: undefined,
        title: undefined,
        foll: undefined,
        total_price: undefined,
        user_id: undefined,
        address_id: undefined,
        seal: undefined,
        payment_time: undefined,
        delivery_time: undefined,
        trading_hours: undefined,
        distribution_type: undefined,
        supplier_address: undefined,
        supplier_phone: undefined,
        supplier_name: undefined,
        supplier_email: undefined,
        receiving_name: undefined,
        receiving_address: undefined,
        receiving_phone: undefined,
        receiving_email: undefined,
        principal: undefined,
        supplier_contacts: undefined,
        receiving_contacts: undefined,
        refuse_cause: undefined,
        phone: undefined,
        code: undefined,
        create_time: undefined,
        status: 'all',
        price: undefined,
        sum: undefined,
        environment: undefined,
        shelf_life: undefined,
        specification: undefined,
        picture: undefined,
        name: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        orderNo: true,
        id: true,
        title: true,
        specification: true,
        create_time: true,
        status: true,
        price: true,
        sum: false,
        environment: true,
        shelf_life: true,
        total_price: true,
        user_id: false,
        address_id: false,
        seal: false,
        payment_time: true,
        delivery_time: false,
        trading_hours: false,
        distribution_type: false,
        supplier_address: true,
        supplier_phone: false,
        supplier_name: false,
        supplier_email: false,
        name: true,
        receiving_name: false,
        receiving_address: false,
        receiving_phone: false,
        receiving_email: false,
        userNo: true,
        receiving_contacts: false,
        principal: false,
        phone: false,
        code: false,
        supplier_contacts: false,
        picture: false,
        refuse_cause: false
      }
    }
  },
  created() {
    this.getLists()
    this.get_user_list()
  },
  methods: {
    get_user_list() {
      get_user(store.getters.token, { id: this.address_id }).then(res => {
        this.user_all = res.data.data
      })
    },
    DownloadExcel() {
      this.downloadLoading = true
      getExcel(store.getters.token, { data: this.listQuery }).then(response => {
        // console.log(response.data.data)
        // console.log(response.data.data.key)
        console.log(response.data.data.data)
        console.log(response.data.data.key)
        console.log(response.data.data.title)
        import('@/vendor/Export2Excel').then(excel => {
          // console.log(response.data.list.value)
          // 导出的标题
          const tHeader = response.data.data.title
          // 属性
          const filterVal = response.data.data.key
          // 数据
          const list = response.data.data.data
          const data = this.formatJson(filterVal, list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'order_list',
            autoWidth: true,
            bookType: 'xlsx'
          })
          this.downloadLoading = false
        })
      }).catch(() => {
        this.getLists()
        this.$message({
          type: 'info',
          message: '失败!'
        })
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else {
          return v[j]
        }
      }))
    },
    order_received_button(v) {
      order_received(store.getters.token, { order_id: v }).then(response => {
        if (response.data.status) {
          this.$message.success('收货成功')
          this.getLists()
        } else {
          this.$message.error('收货失败')
        }
      })
    },
    getLists() {
      this.listLoading = true
      console.log(this.listQuery)
      getList(store.getters.token, this.listQuery).then(response => {
        for (let i = 0; i < Object.keys(response.data.list.data).length; i++) {
          response.data.list.data[i].create_time *= 1000
          response.data.list.data[i].delivery_time *= 1000
        }
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
      })
    },
    bigImage(src) {
      if (src !== undefined) {
        this.$set(this, 'bigImageSrc', src)
      } else {
        this.$set(this, 'bigImageSrc', null)
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getLists()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getLists()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getLists()
    },
    del(id) {
      this.$confirm('此操作将永久删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.info('正在删除，ID：' + id)
        del(store.getters.token, { id: id }).then(res => {
          if (res.status) {
            this.$message.success('已经删除，ID：' + id)
            this.getLists()
          } else {
            this.$message.error('删除失败，ID：' + id)
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除，ID：' + id)
      })
    }
  }
}
</script>
